﻿@model  ScadaWeb.Model.ScadaCommandModel
@{
    ViewBag.Title = "历史命令查询";
    Layout = "~/Views/Shared/_LayoutList.cshtml";
}

<!--模糊搜索区域-->
<div class="layui-row">
    <form class="layui-form layui-col-md12 ok-search" lay-filter="formTest">
        <input id="IO_SERVER_ID" name="IO_SERVER_ID" type="hidden" class="layui-input" lay-filter>
        <input id="IO_COMM_ID" name="IO_COMM_ID" type="hidden" class="layui-input" lay-filter>
        <input id="IO_DEVICE_ID" name="IO_DEVICE_ID" type="hidden" class="layui-input" lay-filter>
        <div class="layui-input-inline">
            <input type="text" id="GroupId" name="GroupId" placeholder="请选择设备分组" autocomplete="off" class="layui-input" style="width:100px;">
        </div>
        <div class="layui-input-inline">
            <div id="DeviceList" style="width:100px;"></div>
        </div>
        
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="开始日期" autocomplete="off" name="StartDate" id="StartDate" value="@Model.StartDate" style="width:140px;">

        </div>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="结束日期" autocomplete="off" name="EndDate" id="EndDate" value="@Model.EndDate" style="width:140px;">
        </div>

        @Html.SearchBtnHtml("查询")


    </form>
</div>
<!--数据表格-->
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>

<script>
   
    layui.config({ base: '/Content/lib/tablePlug/' }).use(["table", "form", "okLayer", "okUtils", "treeSelect", 'tablePlug',"laydate"], function () {
        let table = layui.table;
        let form = layui.form;
        let treeSelect = layui.treeSelect;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        var tablePlug = layui.tablePlug;
        let startdate = layui.laydate;
        let enddate = layui.laydate;
        var $ = layui.$;
        var devices = xmSelect.render({
            el: '#DeviceList',
            filterable: true,
            paging: true,
            pageSize: 50,
            radio: true,


        });
        startdate.render({
            elem: '#StartDate'
       , type: 'datetime'
        });
        enddate.render({
            elem: '#EndDate'
          , type: 'datetime'
        });
        tablePlug.smartReload.enable(true);//处理不闪动的关键代码
        treeSelect.render({
            elem: "#GroupId",
            data: "/Scada/ScadaCommand/GroupTreeListSelect",
            type: "GET",
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 占位符
            placeholder: '请选择设备分组',  // 点击回调
            click: function (d) {
                $("#IO_DEVICE_ID").val("");
                $("#IO_COMM_ID").val("");
                $("#IO_SERVER_ID").val("");
         
                //获取该设备分组下的所有设备信息
                $.get("/Scada/ScadaCommand/GetGroupDevice?groupId=" + d.current.id, function (result) {

                    devices = xmSelect.render({
                        el: '#DeviceList',
                        filterable: true,
                        paging: true,
                        pageSize: 50,
                        radio: true,
                        data: result,
                        on: function (data) {
                            var arr = data.change[0].id;
                            var sid = data.change[0].value3;
                            var cid = data.change[0].value2;
                            var did = data.change[0].value1;
                            var ios = data.change[0].value4;
                            $("#IO_DEVICE_ID").val(did);
                            $("#IO_COMM_ID").val(cid);
                            $("#IO_SERVER_ID").val(sid);
                        },
                    })
                });
            },
        });

        let AllTable = table.render({
            elem: "#tableId",
            url: "/Scada/ScadaCommand/GeneralQueryHistoryCommand",
            limit: 300,
            limits: [100,200,300,500,600,800,1000,1500,2000,3000],
            width: document.body.clientWidth - 10,
            height: 'full-80',
            page: true,
            loading: false,
            id: 'HistoryEvent',
            toolbar: "#toolbarTpl",
            jump: function (obj, first) {
                if (!first) {
                    layer.msg('第 ' + obj.curr + ' 页');
                }
            },
            size: "sm",
            smartReloadModel: true,
            cols: [[
                { field: 'zizeng', width: 60, title: '序号', fixed: 'left', templet: '#zizeng' },
                { field: "COMMAND_ID", title: "命令ID", width: 140, fixed: 'left' },
                { field: "COMMAND_DATE", title: "下置时间", width: 120 },
                { field: "COMMAND_RESULT", title: "下置结果", width: 140 },
                { field: "COMMAND_USER", title: "操作用户", width: 120 },
                { field: "COMMAND_VALUE", title: "下置值", width: 120 },
                { field: "SERVER_ID", title: "采集站", width: 120 },
                { field: "IO_COMM_NAME", title: "通道名称", width: 120 },
                { field: "IO_DEVICE_NAME", title: "设备名称", width: 120 },
                { field: "IO_NAME", title: "IO点", width: 120 },
                { field: "IO_LABEL", title: "IO名称", width: 120 }
            ]],
            done: function (res, curr, count) {
                setTableScoll(this.elem.next('.layui-table-view'), this.scroll);
            }
        });
        //获取滚动条
        function getTableScoll(tbView){
            var scrollTop = tbView.find('.layui-table-body').scrollTop();
            var scrollLeft= tbView.find('.layui-table-body').scrollLeft();
            return {
                scrollTop:scrollTop,scrollLeft:scrollLeft
            }
        };
        //设置滚动条
        function setTableScoll(tbView,scoll={scrollTop:0,scrollLeft:0})
    {

        tbView.find('.layui-table-body').scrollTop(scoll.scrollTop);
        tbView.find('.layui-table-body').scrollLeft(scoll.scrollLeft);
        table.resize('HistoryEvent'); //重置表格尺寸
    };


    var $ = layui.$;
    var scrollTop=0;
    var layuiTable = $('.layui-table-main');
    if(layuiTable!=null&&layuiTable.length>0){
        scrollTop = layuiTable[0].scrollTop;
    };

    
        //数据表定时加载

        form.on("submit(search)", function (data) {

            AllTable.reload({
                where: data.field,
                page: { curr: 1 }
            });
            return false;
        });



        //加载事件类型
        $.get("/Scada/ScadaCommand/GetEventItem", function (result) {
            $("#Event").append("<option value='0'>全部</option>");

            for (var i = 0; i < result.length; i++) {

                $("#Event").append("<option value='" + result[i].name + "'>" + result[i].name + "</option>");
            }

            layui.form.render("select");

        });
        
 


    })
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">

    <label><i class="ok-icon" style="color:red;">&#xe670;</i>注意:此处查询的是所有历史命令信息。</label>
</script>
 
<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>

 


